<template>
	<view v-if="goods_info.goods_name">

		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item, index_info) in goods_info.pics" :key="index_info" @click="preview(index_info)">
				<image :src="item.pics_big" mode="aspectFit"></image>
			</swiper-item>
		</swiper>
		<!-- 商品信息区域 -->
		<view class="goods-info-box">
			<view class="price">￥{{goods_info.goods_price | goods_price}}</view>
			<view class="goods-info-body">
				<view class="goods-name">{{goods_info.goods_name}}</view>
				<view class="favi" @click="increaseCollect(goods_info.goods_id)">
					<view class="favicollet" v-if="!activeCollect">
						<image mode="aspectFit" src="../../static/收藏.png"></image>
						<text>收藏</text>,
					</view>
					<view class="favicollet" v-else>
						<image mode="aspectFit" src="../../static/收藏 (1).png"></image>
						<text style="color: red;font-size: 12px;">已收藏</text>
					</view>
				</view>
			</view>
			<!-- 商品介绍 -->
			<view class="introducesAll">
				<view class="introduceIcon">
					<image mode="aspectFit" src="../../static/商品介绍.png"></image>
					<text>商品介绍</text>
				</view>
				<view class="introduce" v-for="(attrs,index) in goods_info.attrs" :key="index">
					<view class="attr_name">{{attrs.attr_name}} :</view>
					<view class="attr_value">{{attrs.attr_value}}</view>
				</view>
				<view class="yf">快递：免运费</view>
			</view>
		</view>
		<!-- 商品详情信息 -->
		<view class="navgood">
			<view :class="{act:!activeEveal}" @click="activeEveal = !activeEveal">商品详情</view>
			<view :class="{act:activeEveal}" @click="activeEveal = !activeEveal">商品评价</view>
		</view>

		<!-- <rich-text v-if="!activeEveal" :nodes="goods_info.goods_introduce"></rich-text> -->

		<view class="" v-if="!activeEveal">
			<view class="introduceImg-1" v-for="(item,indexImg) in introduceImg" :key="indexImg">

				<!-- <image  mode="widthFix" :src="item" :show-menu-by-longpress="true"></image> -->
				<image mode="widthFix" :src="item" @error='errorImage'></image>


			</view>

		</view>
		<evaluate v-else :good="goods_info"></evaluate>
		<!-- 底部购物车 -->
		<myGoodsNav class="goods_nav " @click="onClick" :options="options" :buttonGroup="buttonGroup"
			@buttonClick="buttonClick"></myGoodsNav>

		<view class="" v-if="showMyModal">
			<myModal :contents="contents" @confirm="confirm" @cancel="cancel"></myModal>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapGetters,
		mapState
	} from 'vuex'
	import myModal from "../../components/myModal/myModal.vue"
	import myMixins from "../../mixins/filterPrice.js"
	export default {
		data() {
			return {
				options: [{
						icon: 'shop',
						text: '客服',

						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						icon: 'cart',
						text: '购物车',
						info: 0
					}
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff',
						id: 0 //自定义
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff',

					}
				],
				goods_info: {}, // 商品详情对象
				goods_id: 0, //商品id
				showMyModal: false, //打开提示框
				contents: "确定加入购物车?",
				activeCollect: false, //是否收藏
				notBuy: false,
				activeEveal: false, //是否评价
				introduceImg: [], //介绍图片
				imageError: true, //加载图片错误时
			};
		},
		onLoad(options) {

			uni.$setNavigationBarColor()
			this.goods_id = options.goods_id
			this.getGoodsDetail(this.goods_id)
			this.checkCollect() //收藏
			this.options[1].info = this.getCartLength //购物车长度
			this.buttonGroup[0].id = this.goods_id //商品id
		},
		mixins: [myMixins],
		computed: {
			...mapGetters("cart", ["getCartLength"]),
			...mapState("cart", ['cart']),
			...mapState("collect", ["collect"]),
			...mapState("address", ["address"]),

		},
		methods: {
			a(index) {
				console.log(index)
			},
			...mapMutations("cart", ["addToCart"]),
			...mapMutations("footmark", ["addFootmark"]),
			...mapMutations("collect", ["addCollect", "deleteCollect"]),
			//加载图片错误时
			errorImage() {
				if (this.imageError) {
					this.introdce()
					this.imageError = false
				}

			},
			//介绍图片
			introdce() {
				this.introduceImg = [
					'../../static/feature/尺码详情.jpg',
					'../../static/feature/码数.jpg',
					'../../static/feature/商品属性.jpg',
					'https://img.alicdn.com/imgextra/i2/2201509970722/O1CN01YwTg1e1HCiiO6ZQTU_!!2201509970722.jpg',
					'https://gw.alicdn.com/tfs/TB1d0h2qVYqK1RjSZLeXXbXppXa-1125-960.png?getAvatar=avatar',
				]
			},
			// 定义请求商品详情数据的方法
			async getGoodsDetail(goods_id) {
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/goods/detail', {
					goods_id
				})

				if (res.meta.status !== 200) return uni.$showToast(res.meta.msg, "error")

				this.goods_info = res.message
				if (this.goods_info.pics.length == 0) {

					let pics_big = [{
							pics_big: '../../static/feature/imgLoadding.jpg'
						},
						{
							pics_big: '../../static/feature/3f2e4777713bb40c.jpg'
						},
						{
							pics_big: '../../static/feature/5a64f7a76f57486d.jpg'
						},
					
					]
					let randomInt = parseInt((Math.random() * 3))
					this.goods_info.pics.push(pics_big[randomInt])
				}


				let newArr = this.goods_info.goods_introduce.split('=')
				let httpsArr = newArr.filter(item => item.includes('https'))
				let reg = /from$/
				httpsArr.forEach(item => {
					if (reg.test(item)) {
						let arrSlice = item.slice(1, item.length)
						if (!arrSlice.includes('106953309517838097403493_x')) {
							this.introduceImg.push(arrSlice)
						}

					}
				})

				if (this.introduceImg.length == 0) {
					this.introdce()
				}



				this.addFootmark(this.goods_info) //添加足迹
			},
			//是否收藏
			checkCollect() {

				let findCollect = this.collect.some(item => item == this.goods_id)
				if (findCollect) {
					return this.activeCollect = true
				}
				this.activeCollect = false
			},
			//添加,删除收藏
			increaseCollect(goods_id) {
				if (!this.activeCollect) {
					this.addCollect(goods_id)
				} else {
					this.deleteCollect(goods_id)
				}

				this.checkCollect()
			},
			// 实现轮播图的预览效果
			preview(index, pics_big) {

				uni.previewImage({
					current: pics_big, //  // 预览时，默认显示图片的索引
					urls: this.goods_info.pics.map(x => x.pics_big) // // 所有图片 url 地址的数组

				})
			},

			//跳转购物车
			onClick(e) {
				if (e.content.text == "购物车") {
					uni.switchTab({
						url: '/pages/cart/cart'
					})
				}
			},
			//判断是否加入购物车
			buttonClick(e) {
				if (e.content.text == "立即购买") {
					this.notBuy = true
					this.contents = "确定此商品立即购买?"
					this.showMyModal = true

				}
				if (e.content.text == "加入购物车") {
					this.notBuy = false
					let ifGood = this.cart.some(item => item.goods_id == e.content.id)
					if (ifGood) {
						this.contents = "确定此商品数量 + 1 ?"
					}
					this.showMyModal = true
				}
			},
			//加入购物车
			confirm() {
				if (!this.notBuy) {
					const goods = {
						goods_id: this.goods_info.goods_id, // 商品的Id
						goods_name: this.goods_info.goods_name, // 商品的名称
						goods_price: this.goods_info.goods_price, // 商品的价格
						goods_count: 1, // 商品的数量
						goods_small_logo: this.goods_info.goods_small_logo, // 商品的图片
						goods_state: true // 商品的勾选状态
					}
					this.addToCart(goods)
					this.options[1].info = this.getCartLength //购物车长度
					this.cancel()
				} else { //立即购买
					if (this.address.length == 0) {
						// uni.$showToast("请选择地址", "error")
						uni.showToast({
							title: '请选择地址',
							icon: "error",
							duration: 1000,
							success: () => {
								setTimeout(() => {
									uni.navigateTo({
										url: '/subUserInfo/address/address'
									})
								}, 1000)
							}
						});
						return;
					}
					this.payOrder()
					this.cancel()
				}
			},
			//立即购买
			async payOrder() {
				const orderInfo = {
					// 开发期间，注释掉真实的订单价格，
					// order_price: this.checkedGoodsAmount,
					// 写死订单总价为 1 分钱
					order_price: 0.01,
					// consignee_addr: this.addstr,
					consignee_addr: JSON.stringify(this.address[0]),
					goods: [{
						goods_id: this.goods_info.goods_id,
						goods_number: 1,
						goods_price: this.goods_info.goods_price
					}]
				}

				// 1.2 发起请求创建订单

				const {
					data: res
				} = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)

				if (res.meta.status !== 200) return uni.$showToast('创建订单失败！', "error")
				uni.$showToast('创建订单成功')
				// 1.3 得到服务器响应的“订单编号”
				const orderNumber = res.message.order_number
				// 2. 获取订单预支付信息
				// 2.1 发起请求获取订单的支付信息
				const {
					data: res2
				} = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', {
					order_number: orderNumber
				})

				// 2.2 预付订单生成失败
				if (res2.meta.status !== 200) return uni.$showToast('预付订单生成失败！', "error")
				// 2.3 得到订单支付相关的必要参数
				// const payInfo = res2.message.pay
				// 3.1 调用 uni.requestPayment() 发起微信支付
				// const [err, succ] = await uni.requestPayment(payInfo)
				// if (err) return uni.$showToast('订单未支付！',"error")
				// 3.3 完成了支付，进一步查询支付的结果
				// const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', {order_number: orderNumber })
				// const {
				// 	data: res3
				// } = await uni.$http.get('/api/public/v1/my/orders/all?number=2')
				// 3.4 检测到订单未支付
				// if (res3.meta.status !== 200) return uni.$showToast('订单未支付！', "error")
				// 3.5 检测到订单支付完成
				uni.showToast({
					title: '预付订单生成！',
					icon: 'success',
					success() {
						uni.navigateTo({
							url: '/subUserInfo/order/order'
						})
					}
				})

			},
			//打开提示框
			//关闭提示框
			cancel() {
				this.showMyModal = false
			},

		}
	}
</script>

<style lang="scss">
	.introduceImg-1 {
		image {
			display: block;
			width: 100%;
		}
	}

	.navgood {

		display: flex;
		height: 100rpx;

		background-color: #f1f3f4;
		width: 100%;
		padding: 20rpx 0;
		margin-bottom: 20rpx;

		.act {
			background-color: #fff;
		}

		view {
			width: 100px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
		}
	}

	swiper {
		height: 750rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.goods-info-box {
		padding: 10px;
		padding-right: 0;

		.price {
			color: #c00000;
			font-size: 18px;
			margin: 10px 0;
		}

		.goods-info-body {
			display: flex;
			justify-content: space-around;

			.goods-name {
				font-size: 13px;
				padding-right: 10px;
			}

			.favi {
				width: 120px;
				font-size: 12px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-left: 1px solid #efefef;
				color: gray;

				.favicollet {
					font-size: 12px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 50px;
				}

				image {

					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.yf {
			// margin: 10px 0;
			font-size: 12px;
			color: gray;
		}
	}

	.introducesAll {
		margin-top: 20rpx;

		.introduceIcon {
			display: flex;
			margin-top: 35rpx;
			margin-bottom: 10rpx;

			image {
				width: 40rpx;
				height: 100%;
			}

			text {
				vertical-align: middle;
				font-size: 28rpx;
				color: #c00000;
			}
		}

		.introduce {
			display: flex;

			.attr_name {
				font-size: 22rpx;
				margin-right: 30rpx;
				color: darkgray;
				margin: 7rpx 0;
			}

			.attr_value {
				font-size: 26rpx;
				margin-left: 20rpx;
			}
		}
	}


	.goods_nav {
		// 为商品导航组件添加固定定位
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>